<template>
  <div>
    <el-row class="w-[80%] mx-auto mt-5">
      <el-col :span="6" v-for="item in data.data.rows" :key="item.id">
        <nuxt-link :to="{ path: '/detail/detail', query: { id: item.id } }">
          <u-card style="margin-bottom: 20px; width: 300px">
            <template #header>{{ item.title }}</template>
            <template #default>
              <div>{{ item.content }}</div>
            </template>
            <template #footer>
              <el-image :src="item.cover" class="w-[200px] h-[100px]" />
            </template>
          </u-card>
        </nuxt-link>
      </el-col>
    </el-row>
    <div class="echarts">
      <div id="main" style="width: 600px;height:400px;"></div>
    </div>
  </div>
</template>

<script lang="js" setup>
import * as echarts from "echarts"

const data1 = [1360, 1320, 732, 701];
const data2 = [500, 800, 900, 360];
const sideData = data1.map(item => item + 90);
const sideData2 = data2.map(item => item + 90);
function getEcharts3DBar() {
  let colorArr = ["#0C628C", "#3887D5", "#2570BB"];
  let color = {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: colorArr[0],
      },
      {
        offset: 0.5,
        color: colorArr[0],
      },
      {
        offset: 0.5,
        color: colorArr[1],
      },
      {
        offset: 1,
        color: colorArr[1],
      },
    ],
  };
  let barWidth = 30;

/** @type EChartsOption */
  let option = {
        tooltip: {
          show: true,
        },
    grid: {
      x: '7%',
      x2: '0%',
      y: '15%',
      y2: '15%',
    },
    legend: {
      show: false,
      data: ['本期', '同期'],
      textStyle: {
        color: '#fff',
        fontSize: '20'
      }
    },
    xAxis: {
      data: ['毕节市', '七星关区', '大方县', '黔西县'],
      //坐标轴
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#214776'
        },
        textStyle: {
          color: '#fff',
          fontSize: '10'
        }
      },
      type: 'category',
      axisLabel: {
        textStyle: {
          color: '#C5DFFB',
          fontWeight: 500,
          fontSize: '14'
        }
      },
      axisTick: {
        textStyle: {
          color: '#fff',
          fontSize: '16'
        },
        show: false,
      },
      splitLine: { show: false }
    },
    yAxis: {
      type: 'value',
      //坐标轴
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#214776'
        },
        textStyle: {
          color: '#fff',
          fontSize: '10'
        }
      },
      axisTick: {
        show: false
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#C5DFFB',
        }
      },
      //分格线
      splitLine: {
        lineStyle: {
          color: '#13365f'
        }
      }
    },
    series: [
      {
        z: 1,
        name: '本期',
        type: "bar",
        barWidth: barWidth,
        barGap: "0%",
        data: data1,
        itemStyle: {
          normal: {
            color: color
          },
        },
      },
      {
        z: 2,
        name: '本期',
        type: "pictorialBar",
        data: sideData,
        symbol: "diamond",
        symbolOffset: ["-75%", "50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: '本期',
        type: "pictorialBar",
        symbolPosition: "end",
        data: data1,
        symbol: "diamond",
        symbolOffset: ["-75%", "-50%"],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderWidth: 2,
            color: colorArr[2]
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 1,
        name: '同期',
        type: "bar",
        barWidth: barWidth,
        barGap: "50%",
        data: data2,
        itemStyle: {
          normal: {
            color: color
          },
        },
      },
      {
        z: 2,
        name: '同期',
        type: "pictorialBar",
        data: sideData2,
        symbol: "diamond",
        symbolOffset: ["75%", "50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: '同期',
        type: "pictorialBar",
        symbolPosition: "end",
        data: data2, // 设追溯点数据为同期数据
        symbol: "diamond", // 设追溯点形状为菱形
        symbolOffset: ["75%", "-70%"], // 设追溯点位置
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth], // 设追溯点大小
        itemStyle: {
          normal: {
            borderWidth: 2,
            color: colorArr[2]
          },
        },
        tooltip: {
          show: false,
        },
      },
    ],
  };
  return option;
}



console.log(getEcharts3DBar());
onMounted(async () => {
  await nextTick();
  const myChart = echarts.init(document.getElementById("main"));
  myChart.setOption(getEcharts3DBar());
});


const { data } = await useAsyncData(
  () => {
    return getArticleList({});
  },
  {
    default: () => ({}),
  }
);

const { data: datsa } = await useAsyncData(
  () => {
    return ahhhTest({});
  },
  {
    default: () => ({}),
  }
);
console.log(datsa.value);
</script>

<style>
</style>
  